<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			/*1*/
			/*$(document).ready(function() {
				var objPerson = {
					name: "John Doe",
					age: 32,
					test: function() {
						$("p").after("Name: " + this.name + "<br> Age: " + this.age);
					}
				};
				$("button").click($.proxy(objPerson, "test"));
			});*/
			/*2*/
			/*x = 0;
			$(document).ready(function() {
				$("div").scroll(function() {
					$("span").text(x += 1);
				});
			});*/

			/*3*/
			/*$(document).ready(function() {
				$("p").toggle(
					function() {
						$("p").css({
							"color": "red"
						});
					},
					function() {
						$("p").css({
							"color": "blue"
						});
					},
					function() {
						$("p").css({
							"color": "green"
						});
					});
			});*/

			/*4*/
			/*$(document).ready(function() {
				$("input").select(function() {
					$("input").after("文本已选中!");
				});
				$("button").click(function() {
					$("input").trigger("select");
				});
			});*/
			/*5*/
			/*$(document).ready(function() {
				$("input").select(function() {
					$("input").after("select 事件触发！");
				});
				$("button").click(function() {
					$("input").triggerHandler("select");
				});
			});*/
			/*6*/
			/*$(document).ready(function() {
				$("body").delegate("p", "click", function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("body").undelegate();
				});
			});*/
			/*7*/
			/*$(document).ready(function() {
				$("p").click(function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("p").unbind();
				});
			});*/
			/*8*/
			$(document).ready(function() {
				$(window).unload(function() {
					alert("Goodbye!");
				});
			});
		</script>
	</head>

	<body>
		<!--1-->
		<!--<button>执行 test 函数</button>
		<p></p>-->

		<!--2-->
		<!--<p>尝试滚动 div 中的滚动条</p>
		<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！
			<br><br> 菜鸟教程 —— 学的不仅是技术，更是梦想！菜鸟教程 —— 学的不仅是技术，更是梦想！</div>
		<p>滚动了 <span>0</span> 次。</p>-->
		​
		<!--3-->
		<!--<p style="font-size:40px">点我。</p>
		<div><b>注意:</b>toggle() 方法在 jQuery 版本 1.8 中被废弃，在版本 1.9 中被移除。</div>-->

		<!--4-->
		<!--<input type="text" value="Hello World">
		<br><br>
		<button>触发输入框的 select 事件</button>-->
		<!--5-->
		<!--<input type="text" value="Hello World">
		<br><br>
		<button>触发输入框的 select 事件</button>
		<p>该方法与 trigger() 方法类似，不同的是 trigger() 也触发事件的默认行为（比如表单提交）。</p>-->

		<!--6/7-->
		<!--<p>这是一个段落。</p>
		<p>这是另外一个段落。</p>
		<p>点击任意段落(p 元素)，该段落就会消失。</p>
		<button>使用 delegate() 方法移除所有段落(p 元素)的事件句柄</button>-->

		<!--8-->
		<p>当你点击
			<a href="http://www.runoob.com">这个链接</a>, 或者关闭窗口，alert 窗口会弹出。</p>

		<!--9-->
		<!--<div id="target">
			右键单击这里
		</div>
		<script>
			$(function() {
				$("#target").contextmenu(function() {
					alert("处理程序.contextmenu()被调用。");
				});
			})
		</script>-->

	</body>

</html>